<template>
  <el-page-header :icon="ArrowLeft" title="编辑通知" @back="fanhui">
    <template #extra>
      <div class="flex items-center">
        <el-button>取消</el-button>
        <el-button type="primary" plain>保存为草稿</el-button>
        <el-button type="primary" class="ml-2">发布</el-button>
      </div>
    </template>
  </el-page-header>
  <el-form :model="form" label-width="120px">

    <el-form-item label="通知类型：">
      <el-select v-model="form.region" placeholder="请输入">
        <el-option label="放假通知" value="100" />
        <el-option label="收假通知" value="101" />
        <el-option label="停课通知" value="102" />
        <el-option label="选课通知" value="103" />
        <el-option label="活动通知" value="104" />
        <el-option label="考试通知" value="105" />
        <el-option label="寒假通知" value="122" />
        <el-option label="暑期活动" value="143" />
        <el-option label="明天放假" value="154" />
      </el-select>
    </el-form-item>

    <el-form-item label="发布范围：">
      <el-radio-group v-model="form.resource">
        <el-radio label="全校"/>
        <el-radio label="一年级" />
        <el-radio label="二年级" />
        <el-radio label="三年级" />
        <el-radio label="四年级" />
        <el-radio label="五年级" />
        <el-radio label="六年级" />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="发布对象：">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="老师" name="type" />
        <el-checkbox label="学生" name="type" />
        <el-checkbox label="家长" name="type" />
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="署名：">
      <el-input v-model="form.name" />
    </el-form-item>

    <el-form-item label="定时发布：" class="TimedReleaseForm">
      <el-switch v-model="form.delivery" @click="handleTimedRelease"
                 style="--el-switch-on-color: #d6d6d6; --el-switch-off-color: #13ce66"
                 inline-prompt
                 active-text="关闭"
                 inactive-text="开启"
      />
      <el-col :span="11" v-show="timedRelease">
        <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="Select date and time"
        />
      </el-col>
    </el-form-item>

    <el-form-item label="通知标题：">
      <el-input v-model="form.headline" />
    </el-form-item>

    <el-form-item label="通知内容：">
      <div id="markdown-box">
        <Editor
            api-key="no-api-key"
            v-model="form.article"
            :init="{
              plugins: 'lists link image table code help wordcount',
              menubar:false
            }"
        />
      </div>
    </el-form-item>

    <el-form-item label="封面：">
      <el-upload action="#" list-type="picture-card" :auto-upload="false">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
          </div>
        </template>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>

    </el-form-item>

    <el-form-item label="附件">
      <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :on-change="handleChange"
      >
        <el-button type="primary">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">
            最多上传5份附件,支持附件格式:Word、Excel、PPT、PDF、JPG,附件大小：需小于50Mb
          </div>
        </template>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button @click="fanhui">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile,UploadProps, UploadUserFile } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import Editor from '@tinymce/tinymce-vue'
import server from "@/utils/request";
import service from "@/api";
import { ElNotification } from 'element-plus'
import {InteractionListAdd} from "@/api/jiaxiaohutong";

const router = useRouter();

// ------日期选择------
const value1 = ref('')
// --------日期相关--------
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
// --------日期相关--------

// 图片上传相关
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
// 图片上传相关

// 文件上传相关
const fileList = ref<UploadUserFile[]>([])

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  fileList.value = fileList.value.slice(-3)
}
//

// 定时发布
let timedRelease = ref(true)
function handleTimedRelease() {
  timedRelease.value = !timedRelease.value
}

// 返回
function fanhui() {
  router.push('/index/jiaxiaohudong/informList')
}


// 提交功能
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  headline: '',
  article: ''
})
let subForm = {
  title: '',
  typeId: "0", // 类型属性(1:内置  0:自定义)
  range: "0",
  tId: "0", // 发布者id
  detail: '',
  priority: "1"
}
const onSubmit = async () => {

  subForm = {
    title: form.name,
    typeId: form.region,
    range: f1(form.resource) as string,
    tId: "1001", // 发布者id
    detail: form.article,
    priority: "1"
  }
  console.log(subForm)
  const res = await service.jiaxiaohutong.InteractionListAdd(subForm)
  console.log(res)
  if(res.data.message ==='新增成功'){
    ElNotification.success({
      title: 'Success',
      message: '新增成功',
      offset: 100,
    })
    router.push('/index/jiaxiaohudong/informList')
  }
}
function f1(str:string) {
  if(str === '全校'){
    return "0"
  } else if(str === '一年级'){
    return "1"
  } else if(str === '二年级'){
    return "2"
  } else if(str === '三年级'){
    return "3"
  } else if(str === '四年级'){
    return "4"
  } else if(str === '五年级'){
    return "5"
  } else if(str === '六年级'){
    return "6"
  }
}

</script>

<style scoped>
:deep(.upload-demo){
  width: 600px;
  display: grid;
  grid-template-columns: 160px 500px;
}

:deep(.el-page-header__header){
  height: 80px;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 20px;
}

.items-center :nth-child(2){
  background-color: #FFFFFF;
}
:deep(.el-switch__core){
  margin-right: 20px;
}
.TimedReleaseForm :deep(.el-form-item__content){
  height: 34px;
}
#markdown-box{
  width: 1200px;
}
</style>
